@import "../../../assets/sass/mixin";

.free-select {
  position: relative;
  display: inline-block;
  width: 7.5rem;
  height: 1.75rem;
  padding-left: .5rem;
  border: 1px solid #d9d9d9;

  .free-select-input {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;

    label {
      @include flexbox;
      position: relative;
      width: calc(100% - 25px);
      height: 100%;
      outline: none;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: transparent;
      align-items: center;
    }

    &:before {
      font-family: FontAwesome;
      content: "\f0dd";
      position: absolute;
      right: 0;
      top: 50%;
      display: inline-block;
      padding: 0 .5rem;
      line-height: 0;
      transform: translate(0, -50%);
    }

  }

  .free-select-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 100%;
    @include boxShadow;
    background: #fff;
    z-index: 999;

    .free-select-wrapper {
      min-width: 100%;
      max-height: 10rem;
      overflow: hidden;
      overflow-y: auto;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;

      ul {
        padding: 0;
        margin: 0;
      }

      li {
        display: block;
        padding: 5px 10px;

        free-checkbox {
          display: block;
        }

        &:hover {
          background: #eee;
        }

        &.free-select-active {
          background: #eee;
          font-weight: bold;
        }
      }
    }
  }

  .free-select-item {
    list-style: none;
    cursor: pointer;

    &.free-select-active {
      background: #eee;
      font-weight: bold;
    }
  }

  .free-select-item-content {
    @include flexbox;
    white-space: nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .free-select-filter {
    position: relative;
    padding: .5rem;
    display: flex;
    align-items: center;
  }

  .free-select-inner {
    position: relative;

    input {
      width: 100%;
      height: 1.5rem;
      border: 1px solid #d9d9d9;
      font-size: .65rem;
      padding: 0 .5rem 0 1.5rem;
      border-radius: 3px;
      color: #666;
    }

    i.fa {
      position: absolute;
      top: 50%;
      left: .5rem;
      color: #999;
      text-align: center;
      transform: translate(0, -50%);
    }
  }
}
